<template>
  <div>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <search :config='searchConfig' @getHeight='getHeight' @search='search' />
      <!-- table区域-begin -->
      <div class='page_table'>
        <vxe-grid
          ref='xGrid'
          v-bind='vexConfig'
          :align='left'
          :border='true'
          :checkbox-config='checkboxConfig'
          :columns='columns'
          :data='dataSource'
          :height='pageHeight-seachHeight-90'
          :loading='loading'
          :resizable='true'
          :showOverflow='true'
          size='mini'
          @checkbox-change='selectChangeEvent'
          @checkbox-all='selectChangeEvent'
        >
          <template #isSuspended='{ text }'>
            <span>{{!Boolean(text) ? "已激活" : "已挂起"}}</span>
          </template>
          <template #action='{t,r,i }'>
            <a-dropdown>
              <a class='ant-dropdown-link'>更多
                <a-icon type='down' />
              </a>
              <a-menu slot='overlay'>
                <a-menu-item>
                  <a href="javascript:void(0);" style="color: green;" @click="history(r)" >审批历史</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:void(0);" style="color: blue;" @click="detail(r)" >表单数据</a>
                </a-menu-item>
                <a-menu-item>
                  <a-popconfirm title="确定删除吗?" @confirm="() => remove(r)">
                    <a style="color: red;">删除</a>
                  </a-popconfirm>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>

          <template #pager>
            <vxe-pager
              :currentPage.sync='ipagination.current'
              :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']" :page-size.sync='ipagination.pageSize'
              :pageSizes='ipagination.pageSizeOptions'
              :total='ipagination.total' @page-change='handlePageChange'>
            </vxe-pager>
          </template>
        </vxe-grid>
      </div>
      <!-- table区域-end -->
    </a-card>
    <!---->
    <a-modal title="审批历史" v-model="modalLsVisible" :mask-closable="false" :width="'80%'" :footer="null">
      <div v-if="modalLsVisible">
        <component :is="historicDetail" :procInstId="procInstId"></component>
      </div>
    </a-modal>
    <!--流程表单-->
    <a-modal :title="lcModa.title" v-model="lcModa.visible" :footer="null" :maskClosable="false" width="80%">
      <component :disabled="lcModa.disabled" v-if="lcModa.visible" :is="lcModa.formComponent"
                 :processData="lcModa.processData" :isNew = "lcModa.isNew"
                 @close="lcModa.visible=false,lcModa.disabled = false"></component>
    </a-modal>
  </div>
</template>

<script>

import {activitiMixin} from "./mixins/activitiMixin";
import {PageListMixin} from "../../mixins/PageListMixin";
import { postAction,getAction, postFormAction,downFile } from '@/api/manage'
export default {
  mixins:[PageListMixin,activitiMixin],
  name: "process-finish-manage",
  data() {
    return {
      //查询区域
      searchConfig: [
        {
          type: 'input',
          name: 'name',
          placeholder: '流程名称'
        },
        {
          type: 'input',
          name: 'key',
          placeholder: '标识Key'
        },
        {
          type: 'date-range', //范围选择
          range: ['startDate', 'endDate'],
          name: 'range',
          format: 'YYYY-MM-DD',
          placeholder: ['开始时间', '结束时间']
        },
      ],
      //表头
      columns: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },
        {
          title: '流程实例ID',
          minWidth: 80,
          field: 'id'
        },
        {
          title: '流程名称',
          minWidth: 80,
          field: 'name'
        },
        {
          title: '申请人',
          minWidth: 80,
          field: 'applyer'
        },
        {
          title: '标识key',
          minWidth: 80,
          field: 'key'
        },
        {
          title: '版本',
          minWidth: 80,
          field: 'version'
        },
        {
          title: '审批结果',
          minWidth: 80,
          field: 'result',
        },
        {
          title: '原因详情',
          minWidth: 80,
          field: 'deleteReason',
        },
        {
          title: '总耗时',
          minWidth: 80,
          field: 'duration',
        },
        {
          title: '开始时间',
          minWidth: 80,
          field: 'startTime',
        },
        {
          title: '结束时间',
          minWidth: 80,
          field: 'endTime',
        },
        // {
        //   title: '状态',
        //   minWidth: 80,
        //   field: 'isSuspended',
        //   slots: { default: 'isSuspended' },
        // },
        {
          title: '操作',
          field: 'action',
          minWidth: 80,
          slots: { default: 'action' },
        }
      ],
      modalLsVisible: false,
      procInstId: '',
      lcModa: {
        title:'',
        disabled:false,
        visible:false,
        formComponent : null,
        isNew : false
      },
      openSearch: true,
      openTip: true,
      loading: true, // 表单加载状态
      selectCount: 0, // 多选计数
      selectList: [], // 多选数据
      selectDate: null, // 选择日期绑定modal
      searchForm: {
        // 搜索框对应data对象
        name: "",
        key: "",
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      data: [], // 表单数据
      total: 0, // 表单数据总数
      deleteId: "",
      url: {
        getFinishedProcess:window._CONFIG['domianActivitiURL']+'/actProcessIns/getFinishedProcess',
        delHistoricIns:window._CONFIG['domianActivitiURL']+'/actProcessIns/delHistoricInsByIds/'
      }
    };
  },
  methods: {
    loadData(){},
    init() {
      this.getDataList();
    },
    selectDateRange(v) {
      this.searchForm.startDate = null;
      this.searchForm.endDate = null;
      if (v[0]) {
        this.searchForm.startDate = v[0].format("YYYY-MM-DD");
      }
      if (v[1]) {
        this.searchForm.endDate = v[1].format("YYYY-MM-DD");
      }
    },
    getDataList() {
      this.loading = true;
      getAction(this.url.getFinishedProcess,this.searchForm).then(res => {
        this.loading = false;
        if (res.success) {
          this.data = res.result;
        }else {
          this.$message.error(res.message)
        }
      });
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    handleReset() {
      this.selectDate = null;
      this.searchForm={};
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      // 重新加载数据
      this.getDataList();
    },
    handelCancel() {
      this.modalVisible = false;
    },
    detail(r) {
      if (!r.routeName) {
        this.$message.warning(
          "该流程信息未配置表单，请联系开发人员！"
        );
        return;
      }
      this.lcModa.disabled = true;
      this.lcModa.title = '查看流程业务信息：'+r.name;
      this.lcModa.formComponent = this.getFormComponent(r.routeName).component;
      this.lcModa.processData = r;
      this.lcModa.isNew = false;
      this.lcModa.visible = true;
    },
    history(v) {
      if (!v.id) {
        this.$message.error("流程实例ID不存在");
        return;
      }
      this.procInstId = v.id;
      this.modalLsVisible = true;
    },
    remove(v) {
      this.postFormAction(this.url.delHistoricIns+v.id).then(res => {
        if (res.success) {
          this.$message.success("操作成功");
          this.getDataList();
        }else {
          this.$message.error(res.message);
        }
      });
    },
  },
  mounted() {
    this.init();
  },
  watch: {
  }
};
</script>